<template>
  <div class="category">
    <Sidebar
      ref="sidebar"
      :width="width"
      :categories="categories"
      @onBtnClick="handleBtnClick"
    />
    <MainBody :style="{ marginLeft: width + 'px' }" />
    <v-overlay :value="showOverlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
// @ is an alias to /src
import Sidebar from './components/Sidebar.vue';
import MainBody from './components/MainBody.vue';

export default {
  name: 'Category',
  components: { Sidebar, MainBody },
  data() {
    return {
      showOverlay: true,
      width: '100'
    };
  },
  created() {
    this.$store.dispatch('queryCategories', this.hideOverlay);
  },
  computed: {
    categories() {
      const categories = this.$store.state.categories;
      return categories;
    }
  },
  methods: {
    hideOverlay() {
      this.showOverlay = false;
    },
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    handleBtnClick(index) {
      this.childCategories = this.$store.state.childCategories;
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  margin-left: 100px;
}
</style>
